<template>
  <h1>{{ title }}</h1>
  <n-grid y-gap="12" :cols="1" class="gird-margin">
    <n-gi>
      <DBConnection />
    </n-gi>
    <n-gi>
      <DBTable @selected="tableSelected" />
    </n-gi>
    <n-gi>
      <MyBatisGenerator @formHandle="formHandle" />
    </n-gi>
    <n-gi>
      <CodeFile />
    </n-gi>
  </n-grid>
</template>

<script setup lang="ts">
import { provide, ref, onMounted } from "vue";
// import { useMessage } from "naive-ui";
import { Generator } from "@/types/interfaces";
import DBConnection from "./components/DBConnection.vue";
import DBTable from "./components/DBTable.vue";
import MyBatisGenerator from "./components/MyBatisGenerator.vue";
import CodeFile from "./components/CodeFile.vue";
import { GENERATOR_INJECT, DB_CONNECTED_INJECT } from "@/types/constant";
import { isAlive } from "@/utils/api";
// 信息提示
// const message = useMessage();
// 标题
defineProps<{ title: string }>();

// 记录数据库连接状态
const dbConnected = ref(false);
provide(DB_CONNECTED_INJECT, dbConnected);

onMounted(() => {
  checkAlive()
})

// 数据库连接是否存活
const checkAlive = async () => {
  const res = await isAlive()
  dbConnected.value = res.code === 200
}

// 生成器表单
const generator = ref<Generator>({
  generator: null,
  parentPackage: null,
  tablePrefix: null,
  fieldPrefix: null,
  logicDeleteFill: null,
  insertUpdateFill: null,
  insertFill: null,
  updateFill: null,
  useSwagger2: null,
  useLombok: null,
  author: null,
  tables: null,
});

// 选择数据表
const tables = ref<string[]>([]);
const tableSelected = (data: string[]) => {
  tables.value = data;
  generator.value.tables = tables.value;
};

// 生成器配置
const formHandle = (data: Generator) => {
  generator.value = { 
    ...data,
    tables: tables.value
  };
};

// 提供生成器参数
provide(GENERATOR_INJECT, generator);
</script>

<style scoped>
.gird-margin {
  margin: 0 0 1.25rem 0;
}
</style>
